<template>
  <view class="container">
    <!-- 图片预览区域 -->
    <view class="preview-container">
      <block v-for="(image, index) in imageList" :key="index">
        <image :src="image" mode="aspectFill" class="preview-image"></image>
      </block>
    </view>

    <!-- 选择图片按钮 -->
    <button @click="chooseImage">选择图片</button>

    <!-- 上传图片按钮 -->
    <button @click="uploadImages">上传图片</button>
	<button @click="abc">测试</button>
  </view>
  
  
</template>

<script>
export default {
  data() {
    return {
		 uploadResults: [],
         imageList: [] // 存储选定图片路径的数组
    };
  },
  methods: {
    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 9, // 默认9，设置图片选择的最大数量
        success: (res) => {
          // 将选中的新图片数组和已有图片连接
          this.imageList = this.imageList.concat(res.tempFilePaths);
        }
      });
    },
  uploadImages() {
    const token = uni.getStorageSync('login-user').token;
    this.imageList.forEach((filePath, index) => {
      uni.uploadFile({
        url: 'http://192.168.2.226:8086/business/common2/moreUpload',
        header: {
          "token": token
        },
        filePath: filePath, // 每次和传递单个文件路径
        name: `files`, // 假设服务器可以通过数组接受多文件，如果不行则去掉[index]
        success: (uploadFileRes) => {
          console.log(uploadFileRes); // 成功回调
		   // 如果uploadFileRes.data是一个JSON字符串，需要解析它
		              const data = JSON.parse(uploadFileRes.data);
		              // 将上传结果推入结果数组中
		              this.uploadResults.push(data);

        },
        fail: (error) => {
          console.error(error); // 失败回调
        }
      });
    });
  },
  UploadPicUrl(){
	  console.log("这是数据");
	  console.log(JSON.stringify(this.uploadResults));
	  // 使用 map 方法获取所有的 data 值
	  let dataValues = this.uploadResults.map(item => item.data);
	  
	  // 使用 join 方法将数组的所有数据用逗号隔开成一个字符串
	  let dataString = dataValues.join(',');
	  
	  console.log(dataString);


  }
  
  }
};
</script>

<style>
.container {
  padding: 20rpx;
}

.preview-container {

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.preview-image {
  width: 100rpx;
  height: 100rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}
</style>